<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>04 样式的添加</title>
    <style>
      .red {
        color: red;
      }
      .bg {
        background: #58bc58;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 传统的class的写法 -->
      <h2 class="red bg">1.class添加样式</h2>
      <!-- vue-class写成字符串 -->
      <h2 :class="name1">2.vue-class添加样式-字符串</h2>
      <!-- vue-class写成对象: key：类名 value: 属性名，是布尔值。如果为true就启用该样式  (重点)  -->
      <h2 :class="{red:isred,bg:isbg}">3.vue-class添加样式-对象</h2>
      <!-- vue-class写成数组 -->
      <h2 :class="name2">4.vue-class添加样式-数组</h2>

      <!-- 添加行内样式 -->
      <h2 style="width: 200px; height: 200px; background: pink">
        5.style添加样式
      </h2>
      <h2 contenteditable="true" :style="{fontSize:fs,color:cl}">
        6.vue-style添加样式-对象
      </h2>
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        name1: "red",
        isred: true,
        isbg: false,
        name2: ["red", "bg"],
        fs: "20px",
        cl: "blue",
      },
    });
  </script>
</html>
